import React, { useContext, memo } from 'react';
import { DatePicker, Form } from 'antd';
import moment from 'moment';

import OrganizationSelect from '@/components/OrganizationSelect';

import SalaryPageProvider from '@/pages/SalaryManage/components/SalaryPageWrapper/SalaryPageProvider';
import Search from '@/pages/SalaryManage/components/SuperSearch';
import TwoColHead from '@/pages/SalaryManage/components/TwoColHead';
import useCheckButton from '@/pages/SalaryManage/SalaryCalculate/Recheck/components/CheckHandle/useCheckButton';

const { MonthPicker } = DatePicker;

//  搜索栏
const SearchWrapper = memo(({ checkButtonList, paymentTime }) => {
    const salaryProvider = useContext(SalaryPageProvider);
    const { period, organizationCode, searchModel, organizationTreeData, changeSalaryProviderParam } = salaryProvider;

    const { render: buttonRender } = useCheckButton(checkButtonList, null, paymentTime);

    //  月份切换事件
    const onChange = (date, dateString) => {
        changeSalaryProviderParam({
            period: dateString
        });
    };

    const { departmentCode } = searchModel;

    // 1.设置默认选择月份
    const periodMoment = period ? moment(period) : null;

    const handleOrgChange = val => {
        changeSalaryProviderParam({
            type: 'changeOrg',
            organizationCode: val
        });
    };

    const handleDepChange = val => {
        changeSalaryProviderParam({
            type: 'initPage',
            searchModel: {
                ...searchModel,
                departmentCode: val
            }
        });
    };

    return (
        <Search.Wrapper style={{ marginTop: 20 }}>
            <TwoColHead
                style={{ margin: 0, width: '100%' }}
                left={
                    <>
                        <Search.Item label="机构">
                            <OrganizationSelect
                                isStrictly
                                allowClear={false}
                                isNeedPermission
                                style={{ width: 220 }}
                                value={organizationCode}
                                treeDataFromProp
                                treeDataList={organizationTreeData}
                                onChange={handleOrgChange}
                                unLoading
                            />
                        </Search.Item>
                        <Search.Item>
                            <OrganizationSelect
                                isStrictly
                                isFunctional
                                style={{ width: 150 }}
                                value={departmentCode}
                                onChange={handleDepChange}
                                extraQuery={{ auditStatus: 2 }}
                                unLoading
                            />
                        </Search.Item>
                        <Search.Item label="月份">
                            <MonthPicker
                                onChange={onChange}
                                value={periodMoment}
                                style={{ width: '110px' }}
                                allowClear={false}
                            />
                        </Search.Item>
                        {buttonRender()}
                    </>
                }
            />
        </Search.Wrapper>
    );
});

export default memo(Form.create()(SearchWrapper));
